<template>
  <div>
    <el-container class="container">
      <el-aside width="200px">
        <el-menu>
          <el-menu-item index="2">
            <span>Navigator Two</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div ref="videoBox" class="videoBox">
          <swiper
            ref="swiperRef"
            :slides-per-view="1"
            :pagination="true"
            direction="vertical"
            touch-start-prevent-default="false"
            :mousewheel="true"
            @slide-next-transition-start="slideStartTransitionStart"
            @slide-prev-transition-start="slidePrevTransitionStart"
            @init="handleInit"
            @reach-end="getAllVideo"
            class="swiper-container"
          >
            <swiper-slide
              class="swiper-slide"
              v-for="(video, index) in videoList"
              :key="index"
              :class="['box', { fullScreen: isFullScreen }]"
            >
              <div
                class="video"
                @click="handleOneTap"
                @dblclick="handleDoubleClick(video.id)"
              >
                <!-- <video ref="videoRef" :autoplay="false" :muted="true" -->
                <video
                  ref="videoRef"
                  :autoplay="index == 0 ? 'true' : false"
                  :muted="true"
                  loop
                  @timeupdate="updateProgressBar()"
                  @play="getComments(video.id)"
                >
                  <source :src="video.videoUrl" />
                </video>
              </div>
              <!-- 视频信息 -->
              <div class="message">
                <div class="videoMessageBox">
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 50px;
                      width: 50px;
                    "
                  >
                    <el-avatar
                      :src="video.user.avatar"
                      @click="avatarClick(video.user.id)"
                    ></el-avatar>
                    <div
                      class="touxiangguanzhu"
                      v-if="video.isConcern == 2 || video.isConcern == 3"
                      style="
                        background-color: #fff;
                        border-radius: 10px;
                        height: 13px;
                        width: 13px;
                        position: absolute;
                        margin-top: 45px;
                      "
                    ></div>
                    <img
                      id="touxiangguanzhu"
                      src="@/assets/icon/guanzhu.png"
                      v-if="video.isConcern == 2 || video.isConcern == 3"
                    />
                  </div>
                  <div class="videoMessageItem" @click="pariseClick(video.id)">
                    <img
                      src="@/assets/icon/video/xihuan.png"
                      v-if="!video.isPraise"
                    />
                    <img
                      src="@/assets/icon/video/yixihuan.png"
                      v-if="video.isPraise"
                    />
                    <span>{{
                      video.praise > 9999
                        ? (video.praise / 10000).toFixed(1) + "W"
                        : video.praise
                    }}</span>
                  </div>
                  <div class="videoMessageItem" @click="openPingLun">
                    <img
                      style="height: 25px; width: 25px"
                      src="@/assets/icon/video/pinglun.png"
                      alt=""
                    />
                    <span>{{
                      video.comments > 9999
                        ? (video.comments / 10000).toFixed(1) + "W"
                        : video.comments
                    }}</span>
                  </div>
                  <div class="videoMessageItem">
                    <img src="@/assets/icon/video/shoucang.png" alt="" />
                    <span>{{
                      video.concern > 9999
                        ? (video.concern / 10000).toFixed(1) + "W"
                        : video.concern
                    }}</span>
                  </div>
                  <div class="videoMessageItem">
                    <img src="@/assets/icon/video/fenxiang.png" alt="" />
                    <span>{{
                      video.share > 9999
                        ? (video.share / 10000).toFixed(1) + "W"
                        : video.share
                    }}</span>
                  </div>
                </div>
                <div class="synopsisBox">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      margin-bottom: 5px;
                    "
                  >
                    <span style="font-size: 20px; font-weight: 1000">
                      @{{ video.user.username }}
                    </span>

                    <span>&nbsp&nbsp&nbsp·&nbsp</span>
                    <span style="font-size: 11px">
                      {{ timeDifference(video.createTime) }}
                    </span>
                  </div>
                  <div>
                    <span style="font-size: 14px">
                      {{ video.synopsis }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="contoler">
                <div class="progress">
                  <input
                    type="range"
                    v-model="progress[index]"
                    @input="onProgressChange()"
                    min="0"
                    max="100"
                  />
                </div>
                <div class="videoOption">
                  <div class="videoStatus">
                    <img
                      src="@/assets/icon/video/play.png"
                      v-if="isplay[index] == false"
                      @click="handleOneTap"
                    />
                    <img
                      src="@/assets/icon/video/pause.png"
                      v-else
                      @click="handleOneTap"
                    />
                  </div>
                  <div class="videoTime">
                    <span>{{
                      currentTime[index] != null ? currentTime[index] : "00:00"
                    }}</span>
                    <h>/</h>
                    <span>{{
                      totalTime[index] != null ? totalTime[index] : "00:00"
                    }}</span>
                  </div>
                  <div class="otherOption">
                    <div class="otherOptionItem">
                      <el-dropdown @command="handleCommand">
                        <span> {{ Speed }}x </span>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item command="0.8">
                              0.8x
                            </el-dropdown-item>
                            <el-dropdown-item command="1.0">
                              1.0x
                            </el-dropdown-item>
                            <el-dropdown-item command="1.5">
                              1.5x
                            </el-dropdown-item>
                            <el-dropdown-item command="2.0">
                              2.0x
                            </el-dropdown-item>
                            <el-dropdown-item command="2.5">
                              2.5x
                            </el-dropdown-item>
                            <el-dropdown-item command="3.0">
                              3.0x
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="otherOptionItem">
                      <el-dropdown :teleported="false">
                        <img
                          src="@/assets/icon/video/yinliang0.png"
                          @click="isMuted"
                          v-if="audioRange == 0 || ismuted == true"
                        />
                        <img
                          src="@/assets/icon/video/yinliangda.png"
                          @click="isMuted"
                          v-if="audioRange >= 60 && audioRange <= 100"
                        />
                        <img
                          src="@/assets/icon/video/yinliangzhong.png"
                          @click="isMuted"
                          v-if="audioRange >= 30 && audioRange <= 60"
                        />
                        <img
                          src="@/assets/icon/video/yinliangxiao.png"
                          @click="isMuted"
                          v-if="audioRange > 0 && audioRange <= 30"
                        />
                        <template #dropdown>
                          <el-dropdown-menu>
                            <div class="audioRange">
                              {{ audioRange }}
                              <input
                                type="range"
                                max="100"
                                step="1"
                                min="0"
                                v-model="audioRange"
                                @input="handleAudioChange"
                              />
                            </div>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="otherOptionItem">
                      <img
                        style="width: 21px; height: 21px"
                        src="@/assets/icon/video/wangyequanping.png"
                        @click="toggleFullScreenHTML"
                        v-if="isFullScreenHTML == false"
                      />
                      <img
                        style="width: 21px; height: 21px"
                        src="@/assets/icon/video/exitwangyequanping.png"
                        @click="toggleFullScreenHTML"
                        v-if="isFullScreenHTML == true"
                      />
                    </div>
                    <div class="otherOptionItem">
                      <img
                        src="@/assets/icon/video/quanping.png"
                        @click="toggleFullScreen(index)"
                        v-if="isFullScreen == false"
                      />
                      <img
                        src="@/assets/icon/video/exitquanping.png"
                        @click="toggleFullScreen(index)"
                        v-if="isFullScreen == true"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <!-- <div class="commentsDialog" v-if="commentsDialogVisible">
            <div class="head">
              <div style="display: flex" >
                <div style="margin-right: 5px; padding: 2px; background-color: #faaaaf;" v-for="item in tabsData" :key="item.index">{{ item.label }}</div>
              </div>
              <img
                src="@/assets/icon/video/guanbi.png"
                @click="commentsDialogVisible = false"
              />
            </div>
          </div> -->

          <div class="commentsDialog" v-if="commentsDialogVisible">
            <div class="head">
              <div
                class="title"
                :class="divIndex == item.index ? 'selectCss' : ''"
                v-for="item in tabsData"
                :key="item.index"
                @click="divClick(item.index)"
              >
                {{ item.label }}
              </div>

              <div class="imgBox">
                <img
                  src="@/assets/icon/video/guanbi.png"
                  @click="commentsDialogVisible = false"
                />
              </div>
            </div>
            <!-- 评论 -->
            <div class="body">
              <div
                class="comment"
                style="flex-direction: column"
                v-for="(comments, index) in commentsList"
              >
                <div class="parentComment">
                  <div class="commentLeft">
                    <el-avatar :src="comments.avatar"></el-avatar>
                  </div>
                  <div class="commentRight">
                    <div class="commentRightTop">
                      <span>
                        {{ comments.username }}
                      </span>
                    </div>
                    <div class="commentMiddle">
                      <span>
                        {{ comments.message }}
                      </span>
                      <img
                        style="height: auto; width: 150px"
                        :src="comments.imgUrl"
                        v-if="comments.imgUrl"
                      />
                      <span
                        style="
                          font-size: 12px;
                          color: #ffffff99;
                          margin-top: 2px;
                        "
                        >{{ timeDifference(comments.createTime) }}</span
                      >
                    </div>
                    <div class="commentButtom">
                      <div
                        class="commentButtomItem"
                        @click="
                          toReply(
                            comments.id,
                            comments.message,
                            comments.username,
                            comments.imgUrl,
                            index
                          )
                        "
                      >
                        <svg
                          t="1724662266445"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="11354"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="15"
                          height="15"
                        >
                          <path
                            d="M417.449 973.592a1083.127 1083.127 0 0 1-121.801-6.537c-70.71-6.772-122.556-15.508-158.14-26.731-40.738-12.846-63.186-19.968-61.799-45.773 0.658-6.82 3.253-12.795 7.798-17.925 4.545-5.129 10.162-8.433 16.854-9.906 32.631-5.555 60.003-14.179 82.28-25.866-0.176-8.45-4.226-16.143-11.11-23.897-36.624-40.48-65.458-85.9-86.507-136.27-22.603-53.93-34.428-110.138-35.47-168.607-1.02-62.52 10.632-122.583 34.95-180.186 23.726-55.549 56.651-104.907 97.845-146.683 42.334-42.65 91.093-75.861 146.278-99.64 57.464-24.805 117.485-37.399 180.067-37.784 66.895 0 125.971 11.689 180.422 34.775 55.603 23.55 105.192 56.127 147.49 96.747 43.099 41.657 76.645 89.954 100.62 144.89 24.597 55.488 37.381 115.723 38.02 179.027 1.029 58.912-9.367 115.734-31.191 170.464-21.073 52.65-50.951 99.706-89.626 141.187-38.909 41.414-83.676 75.035-134.3 100.852-52.47 26.907-108.04 43.34-166.703 49.297-14.121 1.968-30.145 3.649-47.1 4.978a1257.813 1257.813 0 0 1-88.877 3.588z m-207.555-86.388c-2.867 1.503-24.274 7.577-27.195 8.967 27.253 5.09 79.27 9.489 118.732 13.252a1028.444 1028.444 0 0 0 146.8 5.787c19.674-0.58 37.437-1.565 53.524-2.838a878.9 878.9 0 0 0 44.786-4.744c51.762-5.204 100.804-19.632 147.144-43.283 44.653-22.774 84.156-52.42 118.504-88.933 33.763-36.226 59.843-77.327 78.228-123.308 18.919-47.604 27.93-97.02 27.022-148.241a395.994 395.994 0 0 0-8.315-78.413 395.976 395.976 0 0 0-23.64-75.222 396.088 396.088 0 0 0-38.042-69.067 396.22 396.22 0 0 0-50.932-60.19c-38.045-36.448-81.362-64.84-129.963-85.177-48.78-20.38-99.603-30.43-152.472-30.145-60.462 0.637-113.466 11.747-162.36 33.04-48.362 20.773-91.085 49.84-128.166 87.199-36.809 37.446-65.416 80.36-85.81 128.745-21.133 50.016-31.238 102.17-30.321 156.46 0.89 50.935 11.151 99.909 30.784 146.914 18.518 44.377 43.901 84.4 76.149 120.067 14.347 16.086 23.142 33.676 26.383 52.479 4.454 25.692-6.827 43.399-30.84 56.65z"
                            p-id="11355"
                            fill="#dbdbdb"
                          ></path>
                        </svg>
                        <span ref="huifuRef" :id="huifuStatus"> 回复 </span>
                      </div>
                      <div class="commentButtomItem">
                        <svg
                          t="1724683809089"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="19366"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="15"
                          height="15"
                        >
                          <path
                            d="M576.02048 114.31936 973.70112 512 576.02048 909.68064 576.02048 694.4768c-12.8-0.75776-27.2384-1.25952-43.12064-1.25952-115.6096 0-306.5856 26.69568-482.60096 173.80352 0 0 60.8256-423.30112 525.7216-510.1568L576.02048 114.31936M576 65.09568c-6.32832 0-12.72832 1.2288-18.82112 3.74784-18.39104 7.61856-30.39232 25.56928-30.39232 45.47584l0 202.67008c-232.192 55.18336-361.3696 192.6656-429.64992 301.33248C19.16928 742.42048 2.26304 855.25504 1.57696 860.01664c-2.89792 20.18304 6.94272 40.05888 24.75008 49.98144 7.48544 4.17792 15.74912 6.23616 23.9616 6.23616 11.30496 0 22.51776-3.88096 31.56992-11.45856 157.78816-131.86048 327.91552-161.34144 444.928-162.304l0 167.19872c0 19.9168 12.00128 37.85728 30.39232 45.47584 6.0928 2.51904 12.4928 3.7376 18.82112 3.7376 12.82048 0 25.40544-4.99712 34.82624-14.41792l397.68064-397.68064c9.22624-9.216 14.41792-21.73952 14.41792-34.79552 0-13.056-5.19168-25.57952-14.41792-34.80576L610.82624 79.5136C601.40544 70.0928 588.82048 65.09568 576 65.09568L576 65.09568z"
                            p-id="19367"
                            fill="#dbdbdb"
                          ></path>
                        </svg>
                        <span> 分享 </span>
                      </div>
                      <div class="commentButtomItem">
                        <svg
                          class="icon"
                          width="15"
                          height="15"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            fill="#dbdbdb"
                            d="M484.072727 218.763636c-44.218182-60.509091-95.418182-90.763636-158.254545-90.763636-121.018182 0-221.090909 109.381818-221.090909 246.690909 0 67.490909 18.618182 111.709091 67.490909 190.836364 6.981818 9.309091 13.963636 20.945455 20.945454 30.254545 30.254545 41.890909 72.145455 86.109091 121.018182 130.327273 39.563636 37.236364 81.454545 72.145455 123.345455 104.727273 13.963636 11.636364 27.927273 23.272727 41.890909 32.581818 6.981818 4.654545 18.618182 13.963636 20.945454 13.963636 4.654545 6.981818 6.981818 6.981818 11.636364 6.981818s6.981818-2.327273 11.636364-4.654545l20.945454-13.963636c13.963636-9.309091 27.927273-20.945455 41.890909-32.581819 41.890909-32.581818 83.781818-69.818182 123.345455-104.727272 48.872727-46.545455 90.763636-90.763636 121.018182-130.327273 6.981818-11.636364 13.963636-20.945455 20.945454-30.254546 51.2-79.127273 67.490909-123.345455 67.490909-190.836363 0-137.309091-100.072727-246.690909-221.090909-246.690909-62.836364 0-114.036364 30.254545-158.254545 90.763636L512 256l-27.927273-37.236364zM698.181818 58.181818c160.581818 0 290.909091 141.963636 290.909091 316.509091 0 83.781818-23.272727 139.636364-79.127273 228.072727-6.981818 11.636364-16.290909 23.272727-23.272727 34.909091-32.581818 44.218182-76.8 90.763636-128 139.636364-39.563636 37.236364-83.781818 74.472727-128 109.381818-25.6 20.945455-72.145455 53.527273-62.836364 46.545455-18.618182 13.963636-37.236364 20.945455-55.854545 20.945454-18.618182 0-39.563636-6.981818-53.527273-18.618182 9.309091 6.981818-37.236364-27.927273-62.836363-46.545454-44.218182-34.909091-88.436364-72.145455-128-109.381818-51.2-48.872727-95.418182-95.418182-128-139.636364-9.309091-11.636364-16.290909-23.272727-23.272728-34.909091-55.854545-90.763636-79.127273-144.290909-79.127272-228.072727C34.909091 200.145455 162.909091 58.181818 325.818182 58.181818c72.145455 0 134.981818 30.254545 186.181818 83.781818 51.2-53.527273 114.036364-83.781818 186.181818-83.781818z"
                          />
                        </svg>
                        <span> {{ comments.praise }} </span>
                      </div>
                      <div class="commentButtomItem">
                        <svg
                          t="1724688171302"
                          class="icon"
                          viewBox="0 0 1282 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="33731"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="17"
                          height="17"
                        >
                          <path
                            d="M554.012232 1023.999314a74.816747 74.816747 0 0 1-53.195393-21.96455l-391.24354-391.243539-3.431961 4.118353-25.739706-34.319609A328.781852 328.781852 0 0 1 0.436943 348.246218 350.403205 350.403205 0 0 1 352.212933 0.588581a244.355614 244.355614 0 0 1 163.704533 48.390649l19.562177 13.041451-30.544451 134.876062 73.100766 111.538729 2.745569 108.106767 72.071178-130.414513-63.491276-99.183669 38.094766-122.521003 8.236706-6.520726a201.456103 201.456103 0 0 1 138.994415-57.313747 350.403205 350.403205 0 0 1 351.77599 347.657637 332.557009 332.557009 0 0 1-100.556454 238.52128l-419.728815 415.267266a74.473551 74.473551 0 0 1-52.165805 21.96455zM132.910633 537.004066L549.550683 953.644116a6.520726 6.520726 0 0 0 8.923098 0l418.356031-414.92407a262.201811 262.201811 0 0 0 80.65108-190.130632A281.420792 281.420792 0 0 0 774.34412 69.570995a120.461827 120.461827 0 0 0-88.201394 34.319609l-22.307746 71.727982 68.639218 107.077179-213.811163 387.125187-8.579902-341.136911-78.591904-119.775435 26.426099-116.343473a176.059593 176.059593 0 0 0-105.704395-24.366923A281.420792 281.420792 0 0 0 69.076161 347.216629a263.574595 263.574595 0 0 0 63.834472 189.787437z"
                            fill="#dbdbdb"
                            p-id="33732"
                          ></path>
                        </svg>
                      </div>
                    </div>
                    <div
                      class="zhankai"
                      v-if="
                        !subCommentIsOpen[index] && comments.subCommentCount > 0
                      "
                      @click="subCommentIsOpen[index] = true"
                    >
                      ——
                      <span>展开{{ comments.subCommentCount }}条回复</span>
                    </div>
                  </div>
                </div>
                <!-- 子评论 -->
                <div class="subComment" v-if="subCommentIsOpen[index]">
                  <div
                    class="comment"
                    v-for="(comments, index) in comments.comments"
                  >
                    <div class="commentLeft">
                      <el-avatar :src="comments.avatar"></el-avatar>
                    </div>
                    <div class="commentRight">
                      <div class="commentRightTop">
                        <span>
                          {{ comments.username }}
                        </span>
                      </div>
                      <div class="commentMiddle">
                        <span>
                          {{ comments.message }}
                        </span>
                        <img
                          style="height: auto; width: 150px"
                          :src="comments.imgUrl"
                          v-if="comments.imgUrl"
                        />
                        <span
                          style="
                            font-size: 12px;
                            color: #ffffff99;
                            margin-top: 2px;
                          "
                          >{{ timeDifference(comments.createTime) }}</span
                        >
                      </div>
                      <div class="commentButtom">
                        <div
                          class="commentButtomItem"
                          @click="
                            toReply(
                              comments.id,
                              comments.message,
                              comments.username,
                              comments.imgUrl,
                              index
                            )
                          "
                        >
                          <svg
                            t="1724662266445"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="11354"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="15"
                            height="15"
                          >
                            <path
                              d="M417.449 973.592a1083.127 1083.127 0 0 1-121.801-6.537c-70.71-6.772-122.556-15.508-158.14-26.731-40.738-12.846-63.186-19.968-61.799-45.773 0.658-6.82 3.253-12.795 7.798-17.925 4.545-5.129 10.162-8.433 16.854-9.906 32.631-5.555 60.003-14.179 82.28-25.866-0.176-8.45-4.226-16.143-11.11-23.897-36.624-40.48-65.458-85.9-86.507-136.27-22.603-53.93-34.428-110.138-35.47-168.607-1.02-62.52 10.632-122.583 34.95-180.186 23.726-55.549 56.651-104.907 97.845-146.683 42.334-42.65 91.093-75.861 146.278-99.64 57.464-24.805 117.485-37.399 180.067-37.784 66.895 0 125.971 11.689 180.422 34.775 55.603 23.55 105.192 56.127 147.49 96.747 43.099 41.657 76.645 89.954 100.62 144.89 24.597 55.488 37.381 115.723 38.02 179.027 1.029 58.912-9.367 115.734-31.191 170.464-21.073 52.65-50.951 99.706-89.626 141.187-38.909 41.414-83.676 75.035-134.3 100.852-52.47 26.907-108.04 43.34-166.703 49.297-14.121 1.968-30.145 3.649-47.1 4.978a1257.813 1257.813 0 0 1-88.877 3.588z m-207.555-86.388c-2.867 1.503-24.274 7.577-27.195 8.967 27.253 5.09 79.27 9.489 118.732 13.252a1028.444 1028.444 0 0 0 146.8 5.787c19.674-0.58 37.437-1.565 53.524-2.838a878.9 878.9 0 0 0 44.786-4.744c51.762-5.204 100.804-19.632 147.144-43.283 44.653-22.774 84.156-52.42 118.504-88.933 33.763-36.226 59.843-77.327 78.228-123.308 18.919-47.604 27.93-97.02 27.022-148.241a395.994 395.994 0 0 0-8.315-78.413 395.976 395.976 0 0 0-23.64-75.222 396.088 396.088 0 0 0-38.042-69.067 396.22 396.22 0 0 0-50.932-60.19c-38.045-36.448-81.362-64.84-129.963-85.177-48.78-20.38-99.603-30.43-152.472-30.145-60.462 0.637-113.466 11.747-162.36 33.04-48.362 20.773-91.085 49.84-128.166 87.199-36.809 37.446-65.416 80.36-85.81 128.745-21.133 50.016-31.238 102.17-30.321 156.46 0.89 50.935 11.151 99.909 30.784 146.914 18.518 44.377 43.901 84.4 76.149 120.067 14.347 16.086 23.142 33.676 26.383 52.479 4.454 25.692-6.827 43.399-30.84 56.65z"
                              p-id="11355"
                              fill="#dbdbdb"
                            ></path>
                          </svg>
                          <span ref="huifuRef" :id="huifuStatus"> 回复 </span>
                        </div>
                        <div class="commentButtomItem">
                          <svg
                            t="1724683809089"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="19366"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="15"
                            height="15"
                          >
                            <path
                              d="M576.02048 114.31936 973.70112 512 576.02048 909.68064 576.02048 694.4768c-12.8-0.75776-27.2384-1.25952-43.12064-1.25952-115.6096 0-306.5856 26.69568-482.60096 173.80352 0 0 60.8256-423.30112 525.7216-510.1568L576.02048 114.31936M576 65.09568c-6.32832 0-12.72832 1.2288-18.82112 3.74784-18.39104 7.61856-30.39232 25.56928-30.39232 45.47584l0 202.67008c-232.192 55.18336-361.3696 192.6656-429.64992 301.33248C19.16928 742.42048 2.26304 855.25504 1.57696 860.01664c-2.89792 20.18304 6.94272 40.05888 24.75008 49.98144 7.48544 4.17792 15.74912 6.23616 23.9616 6.23616 11.30496 0 22.51776-3.88096 31.56992-11.45856 157.78816-131.86048 327.91552-161.34144 444.928-162.304l0 167.19872c0 19.9168 12.00128 37.85728 30.39232 45.47584 6.0928 2.51904 12.4928 3.7376 18.82112 3.7376 12.82048 0 25.40544-4.99712 34.82624-14.41792l397.68064-397.68064c9.22624-9.216 14.41792-21.73952 14.41792-34.79552 0-13.056-5.19168-25.57952-14.41792-34.80576L610.82624 79.5136C601.40544 70.0928 588.82048 65.09568 576 65.09568L576 65.09568z"
                              p-id="19367"
                              fill="#dbdbdb"
                            ></path>
                          </svg>
                          <span> 分享 </span>
                        </div>
                        <div class="commentButtomItem">
                          <svg
                            class="icon"
                            width="15"
                            height="15"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              fill="#dbdbdb"
                              d="M484.072727 218.763636c-44.218182-60.509091-95.418182-90.763636-158.254545-90.763636-121.018182 0-221.090909 109.381818-221.090909 246.690909 0 67.490909 18.618182 111.709091 67.490909 190.836364 6.981818 9.309091 13.963636 20.945455 20.945454 30.254545 30.254545 41.890909 72.145455 86.109091 121.018182 130.327273 39.563636 37.236364 81.454545 72.145455 123.345455 104.727273 13.963636 11.636364 27.927273 23.272727 41.890909 32.581818 6.981818 4.654545 18.618182 13.963636 20.945454 13.963636 4.654545 6.981818 6.981818 6.981818 11.636364 6.981818s6.981818-2.327273 11.636364-4.654545l20.945454-13.963636c13.963636-9.309091 27.927273-20.945455 41.890909-32.581819 41.890909-32.581818 83.781818-69.818182 123.345455-104.727272 48.872727-46.545455 90.763636-90.763636 121.018182-130.327273 6.981818-11.636364 13.963636-20.945455 20.945454-30.254546 51.2-79.127273 67.490909-123.345455 67.490909-190.836363 0-137.309091-100.072727-246.690909-221.090909-246.690909-62.836364 0-114.036364 30.254545-158.254545 90.763636L512 256l-27.927273-37.236364zM698.181818 58.181818c160.581818 0 290.909091 141.963636 290.909091 316.509091 0 83.781818-23.272727 139.636364-79.127273 228.072727-6.981818 11.636364-16.290909 23.272727-23.272727 34.909091-32.581818 44.218182-76.8 90.763636-128 139.636364-39.563636 37.236364-83.781818 74.472727-128 109.381818-25.6 20.945455-72.145455 53.527273-62.836364 46.545455-18.618182 13.963636-37.236364 20.945455-55.854545 20.945454-18.618182 0-39.563636-6.981818-53.527273-18.618182 9.309091 6.981818-37.236364-27.927273-62.836363-46.545454-44.218182-34.909091-88.436364-72.145455-128-109.381818-51.2-48.872727-95.418182-95.418182-128-139.636364-9.309091-11.636364-16.290909-23.272727-23.272728-34.909091-55.854545-90.763636-79.127273-144.290909-79.127272-228.072727C34.909091 200.145455 162.909091 58.181818 325.818182 58.181818c72.145455 0 134.981818 30.254545 186.181818 83.781818 51.2-53.527273 114.036364-83.781818 186.181818-83.781818z"
                            />
                          </svg>
                          <span> {{ comments.praise }} </span>
                        </div>
                        <div class="commentButtomItem">
                          <svg
                            t="1724688171302"
                            class="icon"
                            viewBox="0 0 1282 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="33731"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="17"
                            height="17"
                          >
                            <path
                              d="M554.012232 1023.999314a74.816747 74.816747 0 0 1-53.195393-21.96455l-391.24354-391.243539-3.431961 4.118353-25.739706-34.319609A328.781852 328.781852 0 0 1 0.436943 348.246218 350.403205 350.403205 0 0 1 352.212933 0.588581a244.355614 244.355614 0 0 1 163.704533 48.390649l19.562177 13.041451-30.544451 134.876062 73.100766 111.538729 2.745569 108.106767 72.071178-130.414513-63.491276-99.183669 38.094766-122.521003 8.236706-6.520726a201.456103 201.456103 0 0 1 138.994415-57.313747 350.403205 350.403205 0 0 1 351.77599 347.657637 332.557009 332.557009 0 0 1-100.556454 238.52128l-419.728815 415.267266a74.473551 74.473551 0 0 1-52.165805 21.96455zM132.910633 537.004066L549.550683 953.644116a6.520726 6.520726 0 0 0 8.923098 0l418.356031-414.92407a262.201811 262.201811 0 0 0 80.65108-190.130632A281.420792 281.420792 0 0 0 774.34412 69.570995a120.461827 120.461827 0 0 0-88.201394 34.319609l-22.307746 71.727982 68.639218 107.077179-213.811163 387.125187-8.579902-341.136911-78.591904-119.775435 26.426099-116.343473a176.059593 176.059593 0 0 0-105.704395-24.366923A281.420792 281.420792 0 0 0 69.076161 347.216629a263.574595 263.574595 0 0 0 63.834472 189.787437z"
                              fill="#dbdbdb"
                              p-id="33732"
                            ></path>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 用户作品 -->
            <div class="bottomBox">
              <div class="bottom">
                <div class="huifu" v-if="isReply">
                  <span style="margin-left: 10px"
                    >回复@{{ replyUsername }}: {{ replyMessage }}</span
                  >
                  <span v-if="haveUrl">[图片]</span>
                  <img
                    src="@/assets/icon/video/guanbi.png"
                    @click="replyClose"
                  />
                </div>
                <div style="display: flex; align-items: center">
                  <div class="bottomItem" style="flex-direction: column">
                    <input
                      type="text"
                      v-model="message"
                      placeholder="欢迎您的留言"
                    />
                    <div style="position: relative" v-if="previewURL != ''">
                      <img :src="previewURL" />
                      <img
                        style="
                          position: absolute;
                          right: 0;
                          width: 14px;
                          height: 14px;
                          cursor: pointer;
                        "
                        @click="resetImg"
                        src="@/assets/icon/video/guanbi.png"
                        alt=""
                      />
                    </div>
                  </div>
                  <div
                    class="bottomItem"
                    style="width: 120px; justify-content: right"
                  >
                    <el-upload
                      style="display: flex; justify-content: center"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :on-change="uploadOnchange"
                      :auto-upload="false"
                      :show-file-list="false"
                    >
                      <svg
                        t="1724803300718"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1711"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                      >
                        <path
                          d="M938.666667 553.92V768c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v297.92z m-64-74.624V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v344.48A290.090667 290.090667 0 0 1 192 597.333333a286.88 286.88 0 0 1 183.296 65.845334C427.029333 528.384 556.906667 437.333333 704 437.333333c65.706667 0 126.997333 16.778667 170.666667 41.962667z m0 82.24c-5.333333-8.32-21.130667-21.653333-43.648-32.917333C796.768 511.488 753.045333 501.333333 704 501.333333c-121.770667 0-229.130667 76.266667-270.432 188.693334-2.730667 7.445333-7.402667 20.32-13.994667 38.581333-7.68 21.301333-34.453333 28.106667-51.370666 13.056-16.437333-14.634667-28.554667-25.066667-36.138667-31.146667A222.890667 222.890667 0 0 0 192 661.333333c-14.464 0-28.725333 1.365333-42.666667 4.053334V768a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V561.525333zM320 480a96 96 0 1 1 0-192 96 96 0 0 1 0 192z m0-64a32 32 0 1 0 0-64 32 32 0 0 0 0 64z"
                          fill="#dbdbdb"
                          p-id="1712"
                        ></path>
                      </svg>
                    </el-upload>
                    <svg
                      t="1724803310527"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1921"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <path
                        d="M512 938.652444c-235.264 0-426.666667-191.402667-426.666667-426.666666s191.402667-426.666667 426.666667-426.666667 426.666667 191.402667 426.666667 426.666667c0 55.552-10.538667 109.639111-31.317334 160.739555a42.709333 42.709333 0 0 1-55.608889 23.438223 42.695111 42.695111 0 0 1-23.452444-55.608889A339.256889 339.256889 0 0 0 853.333333 511.985778c0-188.202667-153.130667-341.333333-341.333333-341.333334s-341.333333 153.130667-341.333333 341.333334 153.130667 341.333333 341.333333 341.333333c53.333333 0 104.391111-11.946667 151.736889-35.484444a42.666667 42.666667 0 0 1 38.001778 76.416A422.684444 422.684444 0 0 1 512 938.652444"
                        fill="#dbdbdb"
                        p-id="1922"
                      ></path>
                      <path
                        d="M512 369.763556c-78.421333 0-142.222222 63.800889-142.222222 142.222222s63.800889 142.222222 142.222222 142.222222a142.222222 142.222222 0 0 0 142.222222-142.222222c0-78.421333-63.800889-142.222222-142.222222-142.222222m0 369.777777c-125.468444 0-227.555556-102.087111-227.555556-227.555555s102.087111-227.555556 227.555556-227.555556 227.555556 102.087111 227.555556 227.555556a227.498667 227.498667 0 0 1-227.555556 227.555555"
                        fill="#dbdbdb"
                        p-id="1923"
                      ></path>
                      <path
                        d="M765.368889 782.791111c-7.822222 0-15.431111-0.768-22.755556-2.275555C689.749333 769.592889 654.222222 722.488889 654.222222 663.324444V327.096889a42.666667 42.666667 0 1 1 85.333334 0v336.213333c0 10.993778 2.631111 29.980444 20.337777 33.649778 19.569778 3.982222 49.322667-12.202667 68.750223-57.230222a42.680889 42.680889 0 0 1 78.364444 33.806222c-33.393778 77.312-91.562667 109.269333-141.653333 109.269333"
                        fill="#dbdbdb"
                        p-id="1924"
                      ></path>
                    </svg>

                    <svg
                      @click="uploadComments"
                      v-if="message != '' || file"
                      t="1724803608015"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="6120"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <path
                        d="M512 309.312c-11.008 0-20.48 3.84-27.392 7.488-7.168 3.84-13.824 8.768-19.712 13.824a313.792 313.792 0 0 0-33.984 35.264c-9.792 11.52-19.328 23.68-27.456 34.048l-1.92 2.56c-9.152 11.52-15.36 19.328-19.2 23.232a32 32 0 1 0 45.952 44.608c6.656-6.912 15.36-17.92 23.488-28.352l1.92-2.432c8.256-10.496 17.024-21.696 26.048-32.256l0.256-0.32v275.712a32 32 0 1 0 64 0V406.976l0.256 0.32c8.96 10.56 17.792 21.76 26.048 32.256l1.92 2.432c8.192 10.432 16.768 21.44 23.488 28.352a32 32 0 0 0 45.888-44.608 367.744 367.744 0 0 1-19.072-23.232l-2.048-2.56c-8.064-10.368-17.6-22.464-27.392-34.048a313.792 313.792 0 0 0-34.048-35.264 113.664 113.664 0 0 0-19.648-13.824A58.432 58.432 0 0 0 512 309.312z"
                        fill="#dbdbdb"
                        p-id="6121"
                      ></path>
                      <path
                        d="M512 53.312a458.688 458.688 0 1 0 0 917.376A458.688 458.688 0 0 0 512 53.312zM117.312 512a394.688 394.688 0 1 1 789.376 0A394.688 394.688 0 0 1 117.312 512z"
                        fill="#dbdbdb"
                        p-id="6122"
                      ></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <commentsDialog
            :tabsData="tabsData"
            v-model:isVisible="commentsDialogVisible"
            :commentsData="commentsList"
            @editConfirm="addComment"
          /> -->
        </div>
        <FriendMessage
          :friendMessage="userMessage"
          :isVisible="userMessageDialogVisible"
          :isFriend="isFriend"
          @update:isVisible="handleDialogVisibility"
        />
        <div></div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
import SwiperCore from "swiper/core";
import { Mousewheel } from "swiper/modules";
import axios from "axios";
import { onMounted, ref, watch } from "vue";
import FriendMessage from "@/components/FriendMessage.vue";
import { timeDifference } from "@/js/timeDifference";
import { ElMessage } from "element-plus";
SwiperCore.use([Mousewheel]);

const tabsData = [
  { label: "标题1", index: 1 },
  { label: "标题2", index: 2 },
  { label: "标题3", index: 3 },
];

const commentsList = ref([]);
const videoList = ref([]);

const videoRef = ref([]);
const swiperRef = ref([]);
const videoBox = ref([]);

const progress = ref(new Array(videoList.value.length).fill(0));
const currentTime = ref(new Array(videoList.value.length).fill(0));
const totalTime = ref(new Array(videoList.value.length).fill(0));

const activeIndex = ref(0);

//是否全屏？控制图标
const isFullScreen = ref(false);

const isFullScreenHTML = ref(false);
//是否在播放
const isplay = ref(new Array(videoList.value.length).fill(false));

const ismuted = ref(true);
//视频音量
const audioRange = ref(0);
//
const commentsDialogVisible = ref(true);
//用户信息dialog
const userMessageDialogVisible = ref(false);
//用户信息
const userMessage = ref({});
//是否是好友
const isFriend = ref(null);

//评论要用的
const message = ref("");
const file = ref({});
const isReply = ref(false);
const huifuRef = ref(null);
const parentId = ref(null);
const subCommentIsOpen = ref(new Array(commentsList.length).fill(false));
const previewURL = ref("");
const replyMessage = ref("");
const replyUsername = ref("");
const haveUrl = ref(false);
const currentIndex = ref(0);
const afterIndex = ref(0);
//---------------------------------------
//点赞评论收藏分享
//点赞操作
async function pariseClick(videoId) {
  const res = await axios.post(
    "/api/video/video_update_praise?userId=" +
      localStorage.getItem("id") +
      "&videoId=" +
      videoId +
      "&isPraise=" +
      videoList.value[activeIndex.value].isPraise
  );
  if (res.data.code == 200) {
    videoList.value[activeIndex.value].isPraise =
      !videoList.value[activeIndex.value].isPraise;
    if (videoList.value[activeIndex.value].isPraise) {
      videoList.value[activeIndex.value].praise += 1;
    } else {
      videoList.value[activeIndex.value].praise -= 1;
    }
  }
}
//评论操作----------------------
//上传评论图片
function uploadOnchange(uploadFile) {
  if (
    [
      "image/jpeg",
      "image/png",
      "image/gif",
      "image/webp",
      "image/svg+xml",
    ].indexOf(uploadFile.raw.type) == -1 //控制格式
  ) {
    ElMessage.error("评论只能发送图片哦！");
  } else {
    previewURL.value = URL.createObjectURL(uploadFile.raw);
    file.value = uploadFile.raw;
  }
}
//提交评论时调用
function uploadComments() {
  addComment();
  message.value = "";
  previewURL.value = "";
  file.value = null;
}
//更改评论区标题为ta的作品还是评论
const divIndex = ref(1);
function divClick(index) {
  divIndex.value = index;
}
//删除选择的图片
function resetImg() {
  previewURL.value = "";
  file.value = null;
}
//点击回复时
function toReply(id, message, username, imgUrl, index) {
  parentId.value = id;
  currentIndex.value = index;
  if (afterIndex.value == index) {
    isReply.value = !isReply.value;
  } else {
    isReply.value = true;
  }

  if (imgUrl != "" && imgUrl) {
    haveUrl.value = true;
  } else {
    haveUrl.value = false;
  }

  replyMessage.value = message;
  replyUsername.value = username;

  handOFF(index);
  // huifuRef.value[index].textContent = "回复中";

  // huifuRef.value[index].textContent = "回复";

  afterIndex.value = index;
}
//点击回复标签的x号时
function replyClose() {
  isReply.value = false;
  huifuRef.value[currentIndex.value].textContent = "回复";
  parentId.value = null;
}
function handOFF(index) {
  const currentText = isReply.value ? "回复中" : "回复";
  const otherText = isReply.value ? "回复" : "回复中";

  huifuRef.value[index].textContent = currentText;
  if (afterIndex.value !== index) {
    huifuRef.value[afterIndex.value].textContent = otherText;
  }

  if (!isReply.value) {
    parentId.value = null;
  }
}
//打开评论
function openPingLun() {
  commentsDialogVisible.value = !commentsDialogVisible.value;
}
//上传评论
async function addComment() {
  const comments = {
    userId: parseInt(localStorage.getItem("id")),
    message: message.value,
    videoId: videoList.value[activeIndex.value].id,
    parentId: parentId.value,
  };

  const formdata = new FormData();
  formdata.append("comments", JSON.stringify(comments));
  formdata.append("file", file.value);
  const res = await axios.post("/api/comments/comments_add", formdata, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
  if (res.data.code == 200) {
    ElMessage.success(res.data.message);

    getComments(comments.videoId);
  } else if (res.data.code == 500) {
    ElMessage.error(res.data.message);
  }
}
//--------------------------------------------------------
//双击屏幕点赞
function handleDoubleClick(videoId) {
  if (!videoList.value[activeIndex.value].isPraise) {
    pariseClick(videoId);
  } else {
    console.log("已经点过赞了");
  }
}
//视频播放
const Speed = ref("1.0");
//调用子组件需要的更新策略
function handleDialogVisibility(newVal) {
  userMessageDialogVisible.value = newVal;
}
//用户头像点击事件
async function avatarClick(userId) {
  const res2 = await axios.get(
    "/api/fans/friend_isConcern?friendId=" +
      userId +
      "&myId=" +
      localStorage.getItem("id")
  );
  if (res2.data.code == 200) {
    isFriend.value = res2.data.data;
  }

  userMessageDialogVisible.value = true;
  const res = await axios.get("/api/user/selectById_user?id=" + userId);
  if (res.data.code == 200) {
    userMessage.value = res.data.data;
  }
}

//watch监听音量变化传递给videoRef.volume(影响性能不用)

// watch(()=> audioRange.value,(newValue) =>{
//     console.log(newValue)
// })

//-------------------------------------------------
//全屏
function handleCommand(command) {
  Speed.value = command;
  videoRef.value[activeIndex.value].playbackRate = command;
}
function toggleFullScreen() {
  const slide = videoBox.value;
  //网页全屏退出需要swiper容器
  const swiperContainer = swiperRef.value.$el;

  if (!slide) {
    return;
  }

  if (isFullScreenHTML.value) {
    isFullScreenHTML.value = false;
    swiperContainer.style.position = "";
    swiperContainer.style.top = "";
    swiperContainer.style.left = "";
    swiperContainer.style.width = "";
    swiperContainer.style.height = "";
    swiperContainer.style.zIndex = "";
  }
  //退出全屏
  if (document.fullscreenElement) {
    isFullScreen.value = false;
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } else {
    //进入全屏

    isFullScreen.value = true;
    if (slide.requestFullscreen) {
      slide.requestFullscreen();
    } else if (slide.mozRequestFullScreen) {
      slide.mozRequestFullScreen();
    } else if (slide.webkitRequestFullscreen) {
      slide.webkitRequestFullscreen();
    } else if (slide.msRequestFullscreen) {
      slide.msRequestFullscreen();
    }
  }
}
//--------------------------------------
//网页全屏------------------------------

const toggleFullScreenHTML = () => {
  const swiperContainer = swiperRef.value.$el;

  if (document.fullscreenElement) {
    isFullScreen.value = false;
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
  if (!isFullScreenHTML.value) {
    isFullScreenHTML.value = true;
    swiperContainer.style.position = "fixed";
    swiperContainer.style.top = "0";
    swiperContainer.style.left = "0";
    swiperContainer.style.width = "100vw";
    swiperContainer.style.height = "100vh";
    swiperContainer.style.zIndex = "1000";
  } else {
    isFullScreenHTML.value = false;
    swiperContainer.style.position = "";
    swiperContainer.style.top = "";
    swiperContainer.style.left = "";
    swiperContainer.style.width = "";
    swiperContainer.style.height = "";
    swiperContainer.style.zIndex = "";
  }
};
//-------------------------------------
//时间转换
function secondsToMinutes(seconds) {
  seconds = Math.round(seconds);
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;

  const formattedMinutes = String(minutes).padStart(2, "0");
  const formattedSeconds = String(remainingSeconds).padStart(2, "0");

  return `${formattedMinutes}:${formattedSeconds}`;
}
//进度条区域------------------------

function onProgressChange() {
  if (videoRef.value) {
    videoRef.value[activeIndex.value].currentTime =
      (progress.value[activeIndex.value] / 100) *
      videoRef.value[activeIndex.value].duration;
  }
}

function updateProgressBar() {
  if (videoRef.value) {
    progress.value[activeIndex.value] =
      (videoRef.value[activeIndex.value].currentTime /
        videoRef.value[activeIndex.value].duration) *
      100;
    totalTime.value[activeIndex.value] = secondsToMinutes(
      videoRef.value[activeIndex.value].duration
    );
    currentTime.value[activeIndex.value] = secondsToMinutes(
      videoRef.value[activeIndex.value].currentTime
    );
    if (videoRef.value[activeIndex.value].paused) {
      isplay.value[activeIndex.value] = false;
    } else {
      isplay.value[activeIndex.value] = true;
    }
  }
}

watch(
  () => progress,
  (newValue) => {
    if (videoRef.value) {
      videoRef.value.currentTime = (newValue / 100) * videoRef.value.duration;
    }
  },
  { deep: true }
);
//---------------------------------

//audioRange的事件
//click事件
function isMuted() {
  if (videoRef.value[activeIndex.value].muted) {
    videoRef.value[activeIndex.value].muted = false;
    ismuted.value = false;
    videoRef.value[activeIndex.value].volume = 0.5;
    audioRange.value = 50;
  } else {
    videoRef.value[activeIndex.value].muted = true;
    ismuted.value = true;
    videoRef.value[activeIndex.value].volume = 0;
    audioRange.value = 0;
  }
}
//change事件
function handleAudioChange() {
  const val = audioRange.value / 100;

  if (videoRef.value[activeIndex.value].muted) {
    videoRef.value[activeIndex.value].muted = false;
    ismuted.value = false;
  }
  videoRef.value[activeIndex.value].volume = val;

  console.log("Setting volume to:", videoRef.value[activeIndex.value].volume);
}
//-------------------------------------------------

//swiper区域-----------------------
function handleInit(swiper) {
  activeIndex.value = swiper.activeIndex;
}

//单击
function handleOneTap() {
  if (videoRef.value) {
    if (videoRef.value[activeIndex.value].paused) {
      videoRef.value[activeIndex.value].play();
      isplay.value[activeIndex.value] = true;
    } else {
      videoRef.value[activeIndex.value].pause();
      isplay.value[activeIndex.value] = false;
    }
  }
}

//朝上一个视频划
function slidePrevTransitionStart(swiper) {
  activeIndex.value = swiper.activeIndex;

  videoRef.value[activeIndex.value].volume = audioRange.value / 100;
  videoRef.value[activeIndex.value].muted = false;

  console.log(videoRef.value[activeIndex.value].volume);
  if (videoRef.value) {
    videoRef.value[activeIndex.value + 1].pause();
    isplay.value[activeIndex.value + 1] = false;
    videoRef.value[activeIndex.value].play();
    isplay.value[activeIndex.value] = true;
    videoRef.value[activeIndex.value].playbackRate = Speed.value;
  }
}
//朝下一个视频划
function slideStartTransitionStart(swiper) {
  activeIndex.value = swiper.activeIndex;
  videoRef.value[activeIndex.value].volume = audioRange.value / 100;
  videoRef.value[activeIndex.value].muted = false;

  console.log(videoRef.value[activeIndex.value].volume);
  if (videoRef.value) {
    videoRef.value[activeIndex.value - 1].pause();
    isplay.value[activeIndex.value - 1] = false;
    videoRef.value[activeIndex.value].play();
    isplay.value[activeIndex.value] = true;
    videoRef.value[activeIndex.value].playbackRate = Speed.value;
  }
}
// activeIndex改变时
// function handleSildeChange() {
//     if (videoRef.value) {

//     }
// }

//------------------------------
async function getAllVideo() {
  const res = await axios.get(
    "/api/video/video_select_recommend?id=" + localStorage.getItem("id")
  );
  if (res.data.code == 200) {
    videoList.value.push(...res.data.data);
  }
}
async function getComments(videoId) {
  const res = await axios.get(
    "api/comments/comments_select_video_id?videoId=" + videoId
  );
  if (res.data.code == 200) {
    commentsList.value = res.data.data;
  }
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}

body {
  height: 100vh;
}

.container {
  width: 100%;
  height: 93vh;

  .el-aside {
    height: 100%;
  }

  .el-main {
    height: 100%;
    padding: 0;
    margin: 0;
  }
}

// .swiper-container:hover {
//     position: fixed;
//     height: 100vh;
//     width: 100%;
// }

.el-dropdown-menu {
  z-index: 10000;
  background-color: #0c0c0c;
}

.audioRange {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;

  input[type="range"] {
    -webkit-appearance: slider-vertical;
    width: 30px;
  }
}

.videoBox {
  display: flex;
  width: 95%;
  height: 92vh;
  border-radius: 15px;
  overflow: hidden;
  .commentsDialog {
    width: 500px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    background-color: #00000000;
    .head {
      display: flex;
      align-items: center;
      background-color: #00000000;
      position: relative;
      height: 50px;
      width: 100%;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 1000;
      .imgBox {
        height: 50px;
        img {
          padding-top: 5px;
          width: 20px;
          height: 20px;
          margin: 5px;
          cursor: pointer;
        }
      }
      .title {
        flex: 1;
        cursor: pointer;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    /* 滚动条整体 */
    .body::-webkit-scrollbar {
      width: 5px; /* 宽度 */
    }

    /* 滚动条轨道 */
    .body::-webkit-scrollbar-track {
      background: #ffffff00; /* 背景色 */
      border-radius: 10px; /* 圆角 */
    }

    /* 滚动条滑块 */
    .body::-webkit-scrollbar-thumb {
      background: #c1c0c099; /* 滑块颜色 */
      border-radius: 10px; /* 圆角 */
    }

    /* 滑块悬停时的样式 */
    .body::-webkit-scrollbar-thumb:hover {
      background: #c1c0c0ef; /* 悬停时的颜色 */
    }

    .body {
      background-color: #00000000;
      height: 100%;
      width: 100%;
      overflow: auto;
      .subComment {
        margin-left: 50px;
        display: flex;
        .el-avatar {
          height: 35px;
          width: 35px;
        }
      }
      .parentComment {
        display: flex;
      }
      .comment {
        margin-top: 5px;
        width: 100%;
        min-height: 90px;
        background-color: #00000000;
        display: flex;
        .zhankai {
          margin-top: 10px;
          color: #ffffff57;
          font-size: 12px;
          span {
            cursor: pointer;
          }
          span:hover {
            color: #ffffff;
          }
        }
      }
      .commentLeft {
        background-color: #00000000;
        display: flex;
        justify-content: center;
        width: 80px;
        .el-avatar {
          margin-top: 5px;
        }
      }
      .commentRight {
        background-color: #00000000;
        display: flex;
        flex-direction: column;
        width: 100%;
        .commentRightTop {
          font-weight: 1000;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #ffffff99;
          height: 30px;
        }
        .commentMiddle {
          min-height: 20px;
          font-size: 13px;
          color: #ffffffe6;
          display: flex;
          flex-direction: column;
        }
        .commentButtom {
          display: flex;
          margin-top: 10px;
          .commentButtomItem {
            cursor: pointer;
            margin-right: 10px;
            display: flex;
            align-items: center;
            font-size: 12px;

            span {
              font-weight: bold;
              color: #ffffff99;
              margin-left: 3px;
            }
          }
          .commentButtomItem:hover {
            span {
              color: #ffffff;
            }
            .icon {
              path {
                fill: #fff;
              }
            }
          }
        }
      }
    }
    .bottomBox::after {
      clear: both;
    }
    .bottomBox {
      display: flex;
      height: auto;
      justify-content: center;
      align-items: start;

      .bottom:hover {
        border: 1px solid #c1bebe;
      }
      .bottom {
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        min-height: 40px;
        width: 93%;
        border-radius: 10px;
        background-color: #d1d1d195;
        .bottomItem {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          img {
            width: 100px;
          }
        }
        .icon:hover {
          path {
            fill: #fff;
          }
        }

        .icon {
          height: 20px;
          width: 20px;
          margin-right: 10px;
          cursor: pointer;
        }
        input {
          margin-left: 15px;
          border: 0;
          background-color: #ffffff00;
          width: 75%;
          height: 38px;
          color: #ffffff;
        }
        input:focus {
          outline: none;
        }
        input::-webkit-input-placeholder {
          color: #ccc;
        }
      }
    }
  }
  .selectCss {
    color: #fff;
    border-bottom: 3px solid red;
  }
  .huifu {
    position: relative;
    height: 25px;
    width: 100%;
    background-color: #ffffff29;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #ffffff57;
    font-size: 12px;
    display: flex;
    align-items: center;
    img {
      position: absolute;
      height: 10px;
      width: 10px;
      right: 0;
      margin-right: 5px;
      cursor: pointer;
    }
  }
  .commentsDialog {
    width: 500px;
    border: 1px solid #eee;
    .head {
      display: flex;
      align-items: center;
      background-color: #aaa;
      position: relative;
      height: 30px;
      display: flex;
      img {
        position: absolute;
        right: 0;
        width: 15px;
        height: 15px;
        margin: 5px;
        cursor: pointer;
      }
    }
  }

  .swiper-container {
    overflow: auto;
    width: 100%;
    height: 100%;
    margin-left: 0;
    background-color: #0c0c0c;

    .swiper-slide {
      margin: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .video {
      z-index: 1000;
      height: 93%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      video {
        height: 100%;
        width: 100%;
      }
    }

    .message {
      position: absolute;
      top: 0;
      width: 100%;
      height: 93%;
      display: flex;

      .synopsisBox {
        z-index: 1001;
        padding: 20px;
        width: 80%;
        height: auto;
        color: #fff;
        position: absolute;
        bottom: 0;
      }

      .videoMessageBox {
        z-index: 1001;
        margin-right: 42px;

        position: absolute;
        bottom: 0;
        right: 0;
        height: 60%;
        width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .el-avatar {
          cursor: pointer;
          transition: transform 0.3s ease-in-out;
        }

        .el-avatar:hover {
          transform: scale(1.1);
        }

        .videoMessageItem {
          cursor: pointer;
          margin-top: 20px;
          width: 50px;
          height: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 12px;
          font-weight: 1000;

          img {
            height: 30px;
            width: 30px;
            transition: transform 0.5s ease-out;
          }

          img:hover {
            transform-origin: bottom;
            animation: shake 0.5s ease-out;
            transform: scale(1.2);
          }

          //动画
          @keyframes shake {
            0% {
              transform: rotate(0deg) scale(1);
            }

            15% {
              transform: rotate(0deg) scale(1.05);
            }

            35% {
              transform: rotate(-18deg) scale(1.2);
            }

            80% {
              transform: rotate(9deg) scale(1.2);
            }

            100% {
              transform: rotate(0deg) scale(1.2);
            }
          }

          span {
            margin-top: 8px;
          }
        }
      }
    }

    .contoler {
      background-color: #000;
      height: 7%;
      width: 100%;
      margin-bottom: 0px;
      display: flex;
      flex-direction: column;

      .videoOption {
        color: #fff;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;

        .videoStatus {
          display: flex;
          align-items: center;
          margin-left: 10px;
          height: 100%;

          img {
            cursor: pointer;
            width: 25px;
            height: 25px;
          }
        }

        .videoTime {
          font-weight: 1000;
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-left: 10px;
        }

        .otherOption {
          justify-content: flex-end;
          display: flex;
          align-items: center;
          height: 100%;
          width: 400px;
          margin-left: auto;

          .otherOptionItem {
            margin-right: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;

            span {
              font-size: 12px;
              font-weight: 1000;
              color: #fff;
            }

            img {
              height: 17px;
              width: 17px;
            }
          }
        }
      }

      .progress {
        margin-top: -10px;
        width: 100%;
        height: 12px;
        z-index: 1000;

        input[type="range"] {
          cursor: pointer;
          width: 100%;
          -webkit-appearance: none;
          appearance: none;
          margin: 0;
          outline: 0;
          background-color: transparent;
        }

        input[type="range"]::-webkit-slider-runnable-track {
          height: 2px;
          background: #8f8f8f88;
        }

        input[type="range"]::-webkit-slider-container {
          margin-bottom: 6px;
          height: 2px;
          overflow: hidden;
        }

        input[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 10px;
          height: 10px;

          background-color: #ffffff00;
          border: 1px solid transparent;
          margin-top: -1px;
          border-image: linear-gradient(#d4d4d6dc, #d4d4d6dc) 0 fill / 1 0 10 0 /
            0px 0px 10px 5000px;
        }

        //hover
        input[type="range"]:hover {
          cursor: pointer;
          width: 100%;
          -webkit-appearance: none;
          appearance: none;
          margin: 0;
          outline: 0;
          background-color: transparent;
        }

        input[type="range"]:hover::-webkit-slider-runnable-track {
          height: 4px;
          background: #8f8f8f;
        }

        input[type="range"]:hover::-webkit-slider-container {
          height: 20px;
          overflow: hidden;
        }

        input[type="range"]:hover::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          box-shadow: 0px 0px 1px 5px rgba($color: #ffffff75, $alpha: 0.3);
          background-color: #ffffff;
          border: 1px solid transparent;
          margin-top: -2px;
          border-image: linear-gradient(#ffffff, #ffffff) 0 fill / 2 1 3 0 / 0px
            0px 0 5000px;
        }
      }

      video {
        width: auto;
        height: 90%;
      }
    }
  }
}

#touxiangguanzhu {
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  position: absolute;
  height: 22px;
  width: 22px;
  margin-top: 45px;
}

#touxiangguanzhu:hover {
  transform: scale(1.2);
}
</style>
